<template>
    <div class="app-container">
        <!-- 患者信息搜索开始 -->
        <el-card class="box-card">
            <el-form ref="queryForm" :model="patientParams" label-width="70px">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="身份证号" porp="idCard">
                            <el-input
                                    v-model="patientParams.idCard"
                                    placeholder="请输入患者身份证号"
                                    clearable
                                    size="small"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载身份证号</el-button>
                            <el-button type="warning" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载患者信息</el-button>
                            <!--              <el-button type="warning" icon="el-icon-search" size="mini" @click="qingchu">清除</el-button>-->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <!-- 患者信息搜索结束 -->

        <!-- 患者基本信息表单开始 -->
        <el-card class="box-card">
            <el-form ref="form" :model="patientParams" :rules="rules" :inline="true" label-width="88px">
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="patientParams.idCard" placeholder="请输身份证号" clearable size="small" style="width:200px"/>
                </el-form-item>
                <el-form-item label="患者姓名" prop="name">
                    <el-input v-model="patientParams.name" placeholder="请输入患者姓名" clearable size="small" style="width:200px"/>
                </el-form-item>
                <el-form-item label="患者电话" prop="phone">
                    <el-input v-model="patientParams.phone" placeholder="请输入患者电话" clearable size="small" style="width:200px"/>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="patientParams.sex">
                        <el-radio v-for="d in sexOptions" :key="d.dictValue" :label="d.dictValue" :value="d.dictValue">{{ d.dictLabel }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker v-model="patientParams.birthday" size="small" style="width:200px" value-format="yyyy-MM-dd" type="date"/>
                </el-form-item>
                <el-form-item label="患者年龄" prop="age">
                    <el-input v-model="patientParams.age" :readonly="true" placeholder="请输入患者年龄" clearable size="small" style="width:200px"/>
                </el-form-item>
                <el-form-item label="地址信息" prop="address" >
                    <el-input v-model="patientParams.address" placeholder="请输入地址信息" clearable style="width:400px" size="small"/>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 患者基本信息表单结束 -->

        <!-- 挂号项目栏开始 -->
        <el-card class="box-card">
            <el-row>
                <el-col :span="12">
                    <el-radio-group v-model="queryDeptParams.regItemId" @change="registeredItemChange">
                        <el-radio-button v-for="d in regItemOptions" :key="d.regItemId" :label="d.regItemId" :value="d.regItemId">{{d.regItemName }}
                        </el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="12">
                    <div style="float:right">
                        <span style="margin-left:20px">挂号费:￥{{ queryDeptParams.regItemAmount }}</span>
                        <el-button type="danger" icon="el-icon-search" :disabled="single" size="small" @click="handleRegistration1">挂号收费</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 挂号项目栏结束 -->

        <el-card>
            <el-form ref="queryDeptForm" :model="queryDeptParams" :inline="true" label-width="68px">
                <el-form-item label="所属科室" prop="deptId">
                    <el-select v-model="queryDeptParams.deptId" placeholder="请选择所属科室" clearable size="small" style="width:200px">
                        <el-option v-for="d in deptOptions" :key="d.deptId" :label="d.deptName" :value="d.deptId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号类型" prop="schedulingType">
                    <el-select v-model="queryDeptParams.schedulingType" placeholder="请选择挂号类型" clearable size="small" style="width:200px">
                        <el-option v-for="dict in schedulingTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号时段" prop="subsectionType">
                    <el-select v-model="queryDeptParams.subsectionType" placeholder="请选择挂号时段" clearable size="small" style="width:200px">
                        <el-option v-for="dict in subsectionTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂号时间" prop="schedulingDay">
                    <el-date-picker v-model="queryDeptParams.schedulingDay" size="small" style="width:240px" value-format="yyyy-MM-dd" type="date"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDeptQuery">搜索</el-button>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetDeptQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <!--部门数据表格开始 -->
            <!--handleSelectionChange-->

            <el-table v-loading="loading" border :data="deptTableList" highlight-current-row @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="科室ID" align="center" prop="deptId" />
                <el-table-column label="科室名称" align="center" prop="deptId" :formatter="deptFormatter"/>
                <el-table-column label="当前号数" align="center" prop="regNumber" />
            </el-table>

            <!--部门数据表格结束 -->
        </el-card>
    </div>
</template>

<script>
    import moment from "moment"
    export default {

        name: "Registered",
        components:{moment},
        data() {
            return {
                // 患者信息查询参数
                patientParams: {sex: '2'},
                // 有号部门的查询条件
                queryDeptParams: {
                    deptId: undefined,
                    schedulingType: '1',
                    subsectionType: undefined,
                    schedulingDay: '',
                    // regItemId: 5,
                    regItemAmount: undefined,


                },
                // 部门数据
                deptTableList: [],
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: '患者姓名不能为空', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'},
                        {pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur'}
                    ],
                    idCard: [
                        {required: true, message: '身份证号不能为空', trigger: 'blur'}
                    ]
                },
                PatientList:[],
                // 遮罩层
                loading: false,
                // 选中部门Ids
                ids: [],
                // 非单个禁用
                single: true,
                // 科室下拉列表数据
                deptOptions: [],
                // 性别数据字典
                sexOptions: [],
                // 挂号类型
                schedulingTypeOptions: [],
                // 排班时段
                subsectionTypeOptions: [],
                // 挂号项目
                regItemOptions: [],
                // 挂号费用
                regItemAmount: undefined,
            }
        },
        watch: {
            patientParams: {
                handler: function() {
                    if (this.patientParams.birthday !== undefined) {
                        this.patientParams.age = this.getAge(this.patientParams.birthday.substring(0, 10))
                    }
                },
                deep: true
            }
        },
        created() {
            this.getguahaoxinxi();
            // 查询性别
            this.initSex();
            //加载所有部门
            this.initDept();
            // 加载挂号类型
            this.guahaoType();
            // 加载挂号时段
            this.guahaoTime();
            // 加载部门数据
            this.getDeptForScheduling();

        },
        methods:{
            // 表格选择中行事件
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.deptId)
                this.single = selection.length !== 1
            },
            // 挂号收费
            handleRegistration1() {
                this.$refs['form'].validate(vaid => {
                    console.log(vaid)
                    if (vaid) {
                        this.$confirm('是否确认给【' + this.patientParams.name + '】进行挂号?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            closeOnClickModal: false,
                            type: 'waring',
                            center: true
                        }).then(() => {
                            delete this.patientParams.age
                            // 取出要挂号的部门
                            const deptId = this.ids[0]
                            // 组装要提交到后台的挂号数据
                            const param={
                                deptId: deptId,
                                regItemId: this.queryDeptParams.regItemId,
                                regItemAmount: this.queryDeptParams.regItemAmount,
                                visitDate: moment(this.queryDeptParams.schedulingDay).format('YYYY-MM-DD'),
                                schedulingType: this.queryDeptParams.schedulingType,
                                subsectionType: this.queryDeptParams.subsectionType
                            }
                            // 提交数据到后台
                            this.$axios.post("/doctor/api/patient/addRegistration",{
                                a1:this.patientParams,
                                a2:this.queryDeptParams,
                                a3:param,
                            }).then(result=>{
                                const regId = result.data.t;
                                this.$message({ showClose: true, message: '\'挂号成功 挂号单号为\''+regId, type: 'success' })
                                // 清空页面上的数据
                                this.resetDeptQuery()
                                this.patientParams = { sex: '2' }

                                this.$confirm('是否确认给挂号ID为【' + regId + '】的挂号收费?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    closeOnClickModal: false,
                                    type: 'waring',
                                    center: true
                                }).then(() => {
                                    // 重新查询挂号列表
                                    this.$axios.get('/doctor/api/registration/getRegId/'+regId).then(result=>{
                                        this.getDeptForScheduling()
                                        this.$message({ showClose: true, message: result.data.msg, type: 'success' })
                                    }).catch(() => {
                                        this.$message({ showClose: true, message: result.data.msg, type: 'error' })
                                    })
                                }).catch(() => {
                                    this.$message({ showClose: true, message: '收费取消', type: 'error' })
                                })
                            })
                        }).catch(() => {
                            this.$message({ showClose: true, message: '挂号取消', type: 'error' })
                        })
                    }
                })
            },
            // 根据输入的身份证号加载患者数据
            handleIdCardQuery(){
                if (this.patientParams.idCard === undefined) {
                    this.$message({ showClose: true, message: '请输入身份证号', type: 'error' })
                    // return
                }
                this.$axios.post("/doctor/api/patient/getInfoByidCard/"+this.patientParams.idCard).then(result=>{
                    this.patientParams = result.data.t;
                })
            },
            // 翻译科室
            deptFormatter(row) {
                let name = ''
                this.deptOptions.filter(item => {
                    if (row.deptId === item.deptId) {
                        name = item.deptName
                    }
                })
                return name
            },
            // 挂号 通过:门诊门诊+病例本急诊急诊+病例本 搜索
            getDeptForScheduling() {
                this.$axios.post("/doctor/api/scheduling/listDeptForScheduling/",this.queryDeptParams).then(result =>{
                    this.deptTableList = result.data.t;
                })
            },
            // 查询搜索
            handleDeptQuery() {
                this.getDeptForScheduling()
            },

            // 重置
            resetDeptQuery() {
                this.queryDeptParams={
                    deptId: undefined,
                    schedulingType: '1',
                    subsectionType: undefined,
                    schedulingDay: '',
                    regItemId: '',
                    regItemAmount: undefined
                }
                this.getDeptForScheduling()
            },
            // 门诊那一排
            getguahaoxinxi(){
                this.$axios.get("/doctor/api/getRegisteredItem").then(result=>{
                    this.regItemOptions = result.data.t
                })
            },
            //初始化挂号类型字典
            guahaoType(){
                this.$axios.get("/system/api/dict/data/findByType/his_scheduling_type").then(result=>{
                    this.schedulingTypeOptions=result.data.t;
                })
            },
            // 挂号解析
            schedulingType(row) {
                let v = row.schedulingTypeOptions;
                return this.formatDict(this.schedulingTypeOptions, v)
            },
            // //初始化挂号时段字典
            guahaoTime(){
                this.$axios.get("/system/api/dict/data/findByType/his_subsection_type").then(result=>{
                    this.subsectionTypeOptions=result.data.t;
                })
            },
            // 挂号时段解析
            subsectionTypeOptions(row) {
                let v = row.subsectionTypeOptions;
                return this.formatDict(this.subsectionTypeOptions, v)
            },
            //初始化性别字典
            initSex(){
                this.$axios.get("/system/api/dict/data/findByType/sys_user_sex").then(result=>{
                    this.sexOptions=result.data.t;
                })
            },
            //初始化部门
            initDept(){
                this.$axios.get("/system/api/dept/list").then(result=>{
                    this.deptOptions=result.data.t;
                })
            },
            // 更新挂号项目类型事件
            registeredItemChange(id) {
                this.regItemOptions.filter(item => {
                    if (id === item.regItemId) {
                        this.queryDeptParams.regItemId = item.regItemId
                        this.queryDeptParams.regItemAmount = item.regItemFee
                    }
                })
                // 动态显示挂号信息
                if (id === 1 || id === 2) {
                    this.queryDeptParams.schedulingType = '1'
                } else {
                    this.queryDeptParams.schedulingType = '2'
                }
                // 重新查询有号的部门
                this.getDeptForScheduling()
            },

        },


    }
</script>
<style scoped>
    .box-card{
        padding: 0px;
        margin: 0px;
        margin-bottom: 8px;
    }
</style>

